<!--
 * @Author: ZCL
 * @Date: 2020-05-20 15:33:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-07-24 10:42:08
-->
<template>
  <!-- 资产领用单 -->
  <div class="assetReceiveSheet">
    <div class="title">已选资产 ({{ cart.length }})</div>
    <!-- 资产列表 start -->
    <div>
      <div class="good-item" v-for="item in cart" :key="item.re_a_id">
        <template>
          <van-checkbox :value="item.checked" label-disabled @click.capture="handleCart(cartTypes.SWITCH_CHECKED, item)">
            <div class="box">
              <div class="left">
                <van-image
                  width="85px"
                  height="85px"
                  :src="item.image_url"
                />
              </div>
              <div class="right">
                <p class="text">{{ item.c_name }}</p>
                <p>型号：{{ item.c_code }} </p>
                <p>编码：{{ item.c_code }} </p>
              </div>
            </div>
          </van-checkbox>
            <!-- 耗材 [显示] -->
          <div class="stepper" v-if="$type === $const.COMMON_TYPES.CONSUMABLE">
            <van-stepper
              :value="item.count"
              :disable-plus="item.count >= item.c_stock"
              :max="item.c_stock"
              min="0"
              button-size="22px"
              input-width="35px"
              integer
              @input="v => handleStepperChange(cartTypes.INPUT_GOOD_COUNT, item, v)"
              @plus="handleCart(cartTypes.ADD_GOOD_COUNT, item)"
              @minus="handleCart(cartTypes.MINUS_GOOD_COUNT, item)"
            />
          </div>
        </template>
      </div>
    </div>
    <!-- 资产列表 end -->

    <!-- 资产 显示 start -->
    <van-radio-group v-model="re_type" direction="horizontal" v-if="$type === $const.COMMON_TYPES.ASSET">
      <van-radio name="1">
        领用为个人资产
        <template #icon="props">
          <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
        </template>
      </van-radio>
      <van-radio name="2">
        领用为部门资产
        <template #icon="props">
          <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
        </template>
      </van-radio>
    </van-radio-group>
    <!-- 资产 显示 end -->

    <!-- 耗材 显示 start -->
    <van-radio-group v-model="re_type" direction="horizontal" v-if="$type === $const.COMMON_TYPES.CONSUMABLE">
      <van-radio name="1">
        领用为个人耗材
        <template #icon="props">
          <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
        </template>
      </van-radio>
      <van-radio name="2">
        领用为部门耗材
        <template #icon="props">
          <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
        </template>
      </van-radio>
    </van-radio-group>
    <!-- 耗材 显示 end -->

    <!-- 领用表单 start -->
    <div>
      <!-- 领用为个人资产 -->
      <van-form v-if="re_type === '1'">
        <van-field
          v-model="name"
          label="领用人员:"
          disabled
          placeholder="默认当前人员"
        />
        <van-field
          v-model="time"
          label="领用时间:"
          disabled
          placeholder="默认当前时间"
        />
        <van-cell
          required
          title="选择部门:"
          is-link
          :value="currentDeptName"
          @click="showAction = true"
        />
        <van-action-sheet
          v-model="showAction"
          :actions="receiveDeptList"
          cancel-text="取消"
          @select="selectReceiveDept"
          @cancel="showAction = false"
        />
        <div class="pt-10"></div>
        <van-field
          v-model="re_reason"
          type="textarea"
          placeholder="请输入领用备注"
          rows="4"
          autosize
          required
          label="领用备注:"
        />
        <div class="pt-10"></div>
        <div style="padding: 20px 16px 40px;background-color: #f8f9fd;">
          <van-button block type="info" native-type="submit" :disabled="!cart.length" @click="onSubmit">
            提交审批
          </van-button>
        </div>
      </van-form>
      <!-- 领用为部门资产 -->
      <van-form v-if="re_type === '2'">
        <van-field
          v-model="name"
          label="操作人员:"
          disabled
          placeholder="默认当前人员"
        />
        <van-field
          v-model="time"
          label="领用时间:"
          disabled
          placeholder="默认当前时间"
        />
        <van-cell
          required
          title="选择部门:"
          is-link
          :value="currentDeptName"
          @click="showAction = true"
        />
        <van-action-sheet
          v-model="showAction"
          :actions="receiveDeptList"
          cancel-text="取消"
          @select="selectReceiveDept"
          @cancel="showAction = false"
        />
        <div class="pt-10"></div>
        <van-field
          v-model="re_reason"
          type="textarea"
          placeholder="请输入领用备注"
          rows="4"
          autosize
          required
          label="领用备注:"
        />
        <div class="pt-10"></div>

        <div style="padding: 20px 16px 40px;background-color: #f8f9fd;">
          <van-button block type="info" native-type="submit" :disabled="!cart.length" @click="onSubmit">
            提交审批
          </van-button>
        </div>

      </van-form>
    </div>
    <!-- 领用表单 end -->

    <!-- 弹出层 start -->
    <van-popup v-model="show">
      <div class="popup">
        <div class="b-title">
          <van-image
            class="img"
            width="22px"
            height="22px"
            :src="require('@/assets/icon/asset/sure.png')"
          />
          已进入审批状态
        </div>
        <div class="flex"><p class="dot"></p>审批通过后请找资产管理员 李某 领用资产。</div>
        <div class="flex"><p class="dot"></p>如果领用为个人资产，请在我的资产里面查看领用记录。</div>
        <div class="flex"><p class="dot"></p>如果领用为部门资产，请在部门资产里面查看领用记录。</div>
        <div class="flex"><p class="dot"></p>资产记为公司运营成本，请注意保管、爱护使用！</div>
      </div>
      <div class="btn" @click="confirmPop">确定</div>
    </van-popup>
    <!-- 弹出层 end -->

  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import { types as cartTypes } from '@/store/modules/cart';
import { COMMON_TYPES } from '@/constant';
import titleMixins from '@/mixins/title';

export default {
  name: 'AssetReceiveSheet',
  mixins: [titleMixins],
  computed: {
    ...mapGetters(['name', 'dept_id']),
    cart () {
      return this.$store.getters.cart[this.$type];
    }
  },
  data () {
    return {
      cartTypes,
      checked: true,
      activeIcon: require('@/assets/icon/selected.png'),
      inactiveIcon: require('@/assets/icon/unselected.png'),
      show: false, // 弹出层
      time: this.$dayjs().format('YYYY-MM-DD'), // 领用时间
      showAction: false, // 显示部门选项
      receiveDeptList: [], // 领取部门列表
      currentDeptName: '', // 当前选中的领用部门
      re_dept_id: '', // 当前选中的领用部门id
      re_reason: '', // 领用备注
      re_type: '1'// 1个人领用 2部门领用
    };
  },
  methods: {
    ...mapMutations('cart', [ ..._.keys(cartTypes) ]),
    // 处理购物车
    handleCart (type, payload) {
      this[type](payload);
    },
    // 数量变更
    handleStepperChange (type, item, value) {
      value = parseInt(value);
      // 只处理输入
      if (type !== cartTypes.INPUT_GOOD_COUNT) return;
      this.$nextTick(() => {
        if (_.isNaN(value) || value < 0) {
          this.$toast({
            type: 'fail',
            message: '输入的数量有误'
          });
          return;
        }
        this.handleCart(type, _.cloneDeep({ ...item, count: value }));
      });
    },
    // 提交领用资产
    onSubmit () {
      if (!this.re_reason) {
        this.$toast.fail('请输入领用备注');
        return;
      }
      let consumable_data = [];
      if (this.$type === COMMON_TYPES.ASSET) {
        consumable_data = this.cart.filter(item => item.checked).map(item => ({
          re_a_id: item.re_a_id,
          f_code: item.f_code,
          f_name: item.f_name
        }));
      } else if (this.$type === COMMON_TYPES.CONSUMABLE) {
        consumable_data = this.cart.filter(item => item.checked).map(item => ({
          re_a_id: item.re_a_id,
          c_code: item.c_code,
          c_name: item.c_name,
          re_num: item.count
        }));
      }
      let params = {
        re_type: this.re_type,
        re_reason: this.re_reason,
        re_dept_id: this.re_dept_id,
        consumable_data: JSON.stringify(consumable_data)
      };
      if (!params.re_dept_id) {
        // this.$notify({
        //   type: 'danger',
        //   message: '请选择部门 :)'
        // });
        this.$toast.fail('请选择部门');
        return;
      }

      // 处理资产及部门
      let request = '';
      switch (this.$type) {
        case COMMON_TYPES.ASSET: request = 'postAssetReceive'; break;
        case COMMON_TYPES.CONSUMABLE: request = 'postConsumableReceive'; break;
      }
      // console.log(request, params);

      this.$api[request](params).then(res => {
        if (res.code === 0) {
          this.show = true;
          // 领用成功,清除购物车
          this.handleCart(cartTypes.RESET_CART);
        }
      });
    },
    // 弹窗确认
    confirmPop () {
      if (this.$type === COMMON_TYPES.ASSET) {
        this.$router.replace({
          path: '/asset-receive',
          query: {
            title: '资产领用',
            type: COMMON_TYPES.ASSET
          }
        });
      } else if (this.$type === COMMON_TYPES.CONSUMABLE) {
        this.$router.replace({
          path: '/asset-receive',
          query: {
            title: '耗材领用',
            type: COMMON_TYPES.CONSUMABLE
          }
        });
      }
    },
    // 获取领取部门
    getReceiveDeptList () {
      let params = {
        dept_ids: this.dept_id,
        wh_id: this.$route.query.wh_id
      };
      if (this.$type === COMMON_TYPES.ASSET) {
        this.$api.getAssetReceiveDept(params).then(res => {
          if (res.code === 0) {
            this.receiveDeptList = res.result.map(item => ({ ...item, name: item.re_dept_name }));
            this.currentDeptName = _.get(this.receiveDeptList, '0.re_dept_name');
            this.re_dept_id = _.get(this.receiveDeptList, '0.re_dept_id');
          }
        });
      } else if (this.$type === COMMON_TYPES.CONSUMABLE) {
        this.$api.getConsumableReceiveDept(params).then(res => {
          if (res.code === 0) {
            this.receiveDeptList = res.result.map(item => ({ ...item, name: item.re_dept_name }));
            this.currentDeptName = _.get(this.receiveDeptList, '0.re_dept_name');
            this.re_dept_id = _.get(this.receiveDeptList, '0.re_dept_id');
          }
        });
      }
    },
    // 选择领取部门
    selectReceiveDept (item) {
      this.currentDeptName = item.re_dept_name;
      this.re_dept_id = item.re_dept_id;
      this.showAction = false;
    }
  },
  created () {
    this.getReceiveDeptList();// 获取领取部门
  }
};
</script>

<style lang="scss" scoped>
.assetReceiveSheet {
  .good-item {
    background-color: #fff;
    padding: 15px 15px;
    border-bottom: 1px solid #f5f5f5;
    /*position: relative;*/
    .stepper {
      /*position: absolute;*/
      text-align: right;
    }
  }
  ::v-deep {
    // checkbox
    .van-checkbox {
    }
    .van-stepper__input {
      font-size: 12px;
      color: #101010;
      background-color: #fff;
      border-top: 1px solid #EEEEEE;
      border-bottom: 1px solid #EEEEEE;
      margin: 0;
    }
    .van-stepper__minus::before, .van-stepper__plus::before {
      width: 35%;
      height: 1px;
    }
    .van-stepper__minus::after, .van-stepper__plus::after {
      width: 1px;
      height: 35%;
    }
    .van-field__label {
      width: 78px;
    }
    // radio
    .van-radio__label {
      font-size: 14px;
    }
    .van-radio-group--horizontal {
      padding: 15px;
    }
  }
  .title {
    font-size: 15px;
    color: #4D4D4D;
    padding: 15px;
  }
  .box {
    display: flex;
    margin-left: 5px;
    background-color: #fff;
    .left {
      margin-right: 14px;
    }
    .right {
      font-size: 14px;
      color: #BBBBBB;
      line-height: 27px;
      width: 214px;
      .text {
        font-size: 16px;
        color: #020202;
        padding-top: 3px;
      }
    }
  }
  // 弹出层
  ::v-deep.van-popup {
    border-radius: 6px;
  }
  .popup {
    width: 280px;
    padding: 20px 20px 0;
    border-radius: 6px;
    .b-title {
      font-size: 18px;
      color: #000000;
      text-align: center;
      padding-bottom: 20px;
    }
    .img {
      transform: translateY(3px);
    }
    .dot {
      background-color: #CAD2D9;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-top: 5px;
      margin-right: 8px;
    }
    .flex {
      font-size: 14px;
      color: #5E5E5E;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      line-height: 20px;
      padding-bottom: 10px;
    }
  }
  .btn {
    margin-top: 10px;
    font-size: 16px;
    color:#0A8EFF;
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #f5f5f5;
  }
  .img-icon {
    height: 20px;
  }
}
</style>
